import { Avatar, Modal, Toast } from "antd-mobile"
import './index.scss'
import { CloseCircleOutline, EditSFill, EyeFill, LocationFill, LockOutline, MessageOutline, QuestionCircleOutline, RightOutline, StarFill, UserOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux"
import type { AppDispatch, RootState } from "../../store"
import { useEffect } from "react"

import { clearErr, clearLogOut, getUserInfo } from "../../store/modules/user"

const Personal = () => {
    const navigate = useNavigate()
    const dispatch = useDispatch<AppDispatch>()
    const { isLogin, userInfo, error } = useSelector((state: RootState) => {
        return state.user
    })
    //如果登录则获取用户信息
    useEffect(() => {
        if (isLogin) {
            dispatch(getUserInfo())
        }
    }, [dispatch, isLogin])
    //请求错误则提示信息
    useEffect(() => {
        if (error !== null) {
            Toast.show({ content: error })
            dispatch(clearErr())
        }
    }, [error, dispatch])
    
    const icon = [
        {
            icon: <LocationFill fontSize={40} color="red" />,
            iconName: '我的地址',
            path: '/address'
        },
        {
            icon: <StarFill fontSize={40} color="#F7D200" />,
            iconName: '我的收藏',
              path: '/'
        },
        {
            icon: <EditSFill fontSize={40} color="green" />,
            iconName: '评论过的',
              path: '/'
        },
        {
            icon: <EyeFill fontSize={40} color="blue" />,
            iconName: '我看过的',
             path: '/'
        },
    ]

    const foot = [
        {
            icon: <UserOutline />,
            title: '个人信息',

        },
        {
            icon: <LockOutline />,
            title: '修改密码'
        },
        {
            icon: <MessageOutline />,
            title: '问题反馈'
        },
        {
            icon: <QuestionCircleOutline />,
            title: '关于我们'
        }
    ]

    const navLogin = () => {
        if (!isLogin) {
            navigate('/login')
        }

    }
    const navIcon = (path:string) => {
        navigate(path)
    }
    const logout = () => {
        Modal.confirm({
            content: '是否退出登录?',
            onConfirm: () => {
                dispatch(clearLogOut())
            }
        })


    }
    return <div className="personal">
        <div className="head" onClick={navLogin}>
            <div className="ava_name">
                <div className="avatar">
                    <Avatar style={{ '--size': '75px' }}
                        src={userInfo.avatar}
                    />
                </div>
                {isLogin ? <div className="userName">
                    <div>{userInfo.nickname}</div>
                    <div>{1352340020}</div>
                </div> :
                    <>
                        <div className="navLogin">未登录</div>
                        <RightOutline fontSize={25} /></>
                }
            </div>

        </div>

        <div className="middle">
            {
                icon.map(item => (
                    <div className="icon" key={item.iconName} onClick={() => navIcon(item.path)}>
                        {item.icon}
                        <div>{item.iconName}</div>
                    </div>
                ))
            }
        </div>
        <div className="foot">
            {foot.map(item => (
                <div className="nav" key={item.title}>
                    <div className="left">
                        {item.icon}
                        <span>{item.title}</span>
                    </div>
                    <div className="right">
                        <RightOutline />
                    </div>
                </div>
            ))
            }
            <div className="nav" onClick={logout}>
                <div className="left">
                    <CloseCircleOutline />
                    <div>退出登录</div>
                </div>
                <div className="right">
                    <RightOutline />
                </div>
            </div>
        </div>
    </div>
}

export { Personal }